<template>
	<div id="details">
		<van-pull-refresh v-model="state.loading" @refresh="onRefresh">
			<van-nav-bar
				title="一人之下"
				left-arrow
				@click-left="onClickLeft"
				fixed
				safe-area-inset-top
				placeholder
			/>

			<div class="details-placeholder">
				<img :src="cover" />
			</div>

			<div class="details-header">
				<div class="details-image">
					<img :src="cover" />
				</div>
				<div class="details-meta">
					<h4>天选者</h4>
					<div class="details-rate">
						<van-rate v-model="rate" />
						<span>{{ rate * 2 }}</span>
					</div>
					<small>更新至566话</small>
				</div>
				<div class="details-actions">
					<a href="javascript:;" class="ri-file-mark-line"></a>
					<van-button round>立即观看</van-button>
					<a href="javascript:;" class="ri-share-line"></a>
				</div>
				<div class="details-extra">
					<div class="details-extra-item">
						<i class="ri-eye-fill"></i>
						<span>83.7k</span>
					</div>
					<div class="details-extra-item">
						<i class="ri-star-fill"></i>
						<span>83.7k</span>
					</div>
				</div>
			</div>

			<div class="details-content">
				<span>作者: G.HO & 高孫志</span>
				<p>
					大学生张楚岚清明回乡，遭遇神秘少女冯宝宝。素未谋面的冯宝宝却对张楚岚异常熟悉，并将其带去自己打工的快递公司。为了帮冯宝宝寻找她的身世，也为了查清自己与爷爷身上的秘密，张楚岚的生活被彻底颠覆，与冯宝宝一同踏上”异人”之旅。
				</p>
			</div>

			<section class="block">
				<div class="block-header">
					<div class="block-title">目录</div>
					<span>连载中，已更新至566话</span>
					<a href="javascript:;" @click="catalog = true">展开目录</a>
				</div>
				<div class="recommend">
					<div class="scroll-view scroll-view-x">
						<van-row gutter="16">
							<van-col v-for="i in 8" :key="i">
								<item
									img="https://via.placeholder.com/112"
									:title="'第' + i + '话'"
									width="100px"
									height="100px"
								/>
							</van-col>
						</van-row>
					</div>
				</div>
			</section>

			<section class="block">
				<div class="block-title">猜你喜欢</div>
				<van-row gutter="16">
					<van-col :span="8" v-for="i in 6" :key="i">
						<item
							img="https://via.placeholder.com/112"
							title="吸血鬼仆人"
							rate="4.7"
						/>
					</van-col>
				</van-row>
			</section>
		</van-pull-refresh>

		<van-popup
			v-model:show="catalog"
			position="bottom"
			:style="{ height: '96vh' }"
			closeable
		>
			<div class="popup-view">
				<div class="popup-title">目录</div>
				<div class="popup-scroll-content">
					<van-cell-group :border="false" class="themes-dark">
						<template v-for="i in 4" :key="i">
							<van-cell title="第一话" value="内容" label="123123" center> 
								<template #icon>
									<img src="https://via.placeholder.com/80" class="catalog-img" />
								</template>
							</van-cell>
						</template>
					</van-cell-group>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";

import item from "../components/list/item.vue";

export default defineComponent({
	components: {
		item,
	},
	setup() {
		const catalog = ref(false);
		const rate = ref("4.3");
		const cover = ref(
			"http://tkcc.tukumanhua.com/tukuccimg/dmimg/mainpic/yuanzun.jpg"
		);

		const state = reactive({
			loading: false,
		});
		const onRefresh = () => {
			setTimeout(() => {
				state.loading = false;
			}, 1000);
		};
		return {
			catalog,
			rate,
			cover,
			state,
			onRefresh,
		};
	},
	methods: {
		onClickLeft() {
			this.$router.go(-1);
		},
	},
});
</script>
